<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  com.yishu.entity.User: 自由如风
  Date: 2018/6/6
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<html>
  <head>
    <title>益书</title>

    <style>
      #image{
        width: 100px;
        height: 100px;
      }

      table {
        border-collapse: collapse;
      }

      td {
        border: 1px solid #000;
        padding: 10px;
      }
    </style>

  </head>

  <body>

  <a href="userLogin.jsp">用户登录</a>
  <a href="/user/goUserCenter">个人中心</a>--%>

<%-- <c:forEach items="${bookList}" var="book">
   <br/>
   书名：${book.bookName}<br/>
   描述:${book.bookDescribe}<br/>
   <img id="image" src="${pageContext.request.contextPath}/image/${book.bookImage}"><br/>
   价格:${book.bookPrice}<br/>
   <a href="/user/showDetail?bookId=${book.bookId}">详情</a>
 </c:forEach>--%>

<%--<p>书籍列表</p>
<table>

  <tr>
    <th>书名</th>
    <th>细节</th>
    <th>价格</th>
    <th>图片</th>
    <th>详情</th>
  </tr>

  <c:forEach items="${bookList}" var="book">
    <tr>
      <td>
        ${book.bookName}
      </td>
      <td>
        ${book.bookDescribe}
      </td>
      <td>
        ${book.bookPrice}
      </td>
      <td>
        <img id="image" src="${pageContext.request.contextPath}/image/${book.bookImage}"><br/>
      </td>
      <td>
        <a href="/user/showDetail?bookId=${book.bookId}">查看</a>
      </td>
    </tr>
  </c:forEach>
</table>
</body>--%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>叮叮书店</title>
    <link href="${pageContext.request.contextPath}/style.css" rel="stylesheet" type="text/css">
    <meta name="author" content="张树明">
    <meta name="keywords" content="书店,叮叮书店,图书">
    <meta name="description" content="叮叮书店是一个销售书籍的网上书店。">
    <meta name="robots" content="index,follow">
    <script type="${pageContext.request.contextPath}/text/javascript" src="js/main.js"></script>
    <style>
        #image{
            width: 130px;
            height: 150px;
        }

        #images{
            width: 130px;
            height: 150px;
        }

        #imag{
            width: 130px;
            height: 150px;
        }
    </style>
</head>
<body>
<div id="advl"><a href="#"><img src="${pageContext.request.contextPath}/images/adv1.gif" alt="广告" /></a></div>
<div id="closel"><img src="${pageContext.request.contextPath}/images/close1.jpg" alt="关闭" /></div>
<div id="advr"><a href="#"><img src="${pageContext.request.contextPath}/images/adv1.gif" alt="广告" /></a></div>
<div id="closer"><img src="${pageContext.request.contextPath}/images/close1.jpg" alt="关闭" /></div>
<!--页眉-->
<div id="header-wrapper">
    <!--网站logo-->
    <header class="container" id="advaddr">
        <div id="logo">
            <a href="index.html"><h1>益书</h1></a>
        </div>
        <div id="search">
            <form action="/searchBook" method="get">
                <input type="text" name="keyWord" placeholder="站内搜索"><input type="submit" value="搜索">
            </form>
        </div>
    </header>
    <!--导航菜单-->
    <div id="nav">
        <nav class="container">
            <ul>
                <li><a href="index.jsp">首页</a></li><li>
                <a href="#">书籍分类</a>
                <ul>
                    <li><a href="#">编程语言</a></li><li>
                    <a href="#">数据库</a></li><li>
                    <a href="#">图形图像</a></li>
                </ul>
            </li><li>
                <a href="#">特刊降价</a></li><li>
                <a href="/user/goUserCenter">个人中心</a></li><li>
                <a href="userLogin.jsp">用户登录</a></li>
            </ul>
            <div id="displaydate"></div>
            <div id="displaytime"></div>
            <div id="menu-logo">
                <a href="/user/showShop?userId=${sessionScope.get("userId")}">购物车</a>
            </div>
        </nav>
    </div>
</div>
<!--内容-->
<div id="content-wrapper" class="container">
    <!--左边内容区-->
    <article>
        <!--图片切换广告-->
        <div id="adv">
            <dl>
                <dt> <a href="#" id="a1">1</a> <a href="#" id="a2">2</a> <a href="#" id="a3">3</a> <a href="#" id="a4">4</a> </dt>
                <dd> <a href="#"><img src="${pageContext.request.contextPath}/images/b-ad1.jpg" id="badimg" alt="广告" /></a> </dd>
            </dl>
        </div>
        <!--本周推荐-->
        <section>
            <h2 id="title1">本周推荐</h2>
            <c:forEach items="${bookList}" var="book" begin="2" end="3">
            <section class="recommend">
                <h3>${book.bookName}</h3>
                <a href="#"><img src="${pageContext.request.contextPath}/image/${book.bookImage}" id="images"/></a><div class="recommend-content">
                <p>
                    <%--<mark>HTML5</mark>
                    致力于为互联网开发者搭建更加便捷、开放的沟通平台。业界普遍认为，在未来几年内，
                    <mark>HTML5</mark>
                    无疑将成为移动互联网领域的主宰者。本书是系统学习网页设计和移动设计的参考图书。--%>
                    ${book.bookDescribe}
                </p>
              <%--  <p>Adam Freeman，曾在多家名企担任高级职务，现为畅销技术图书作家，著有多部C#、.NET和Java方面的大部头作品。其中《ASP.NET 4高级程序设计（第4版）》、《精通ASP.NET
                    MVC
                    3框架（第3版）》销量均在同品种中名列前茅，备受读者推崇。Freeman专门为网页开发新手和网页设计师打造的经典参考书，这本书秉承作者的一贯风格，幽默风趣、简约凝练、逻辑性强，是广大Web开发人员的必读经典。</p>--%>
            </div>
                <div class="cartmore"><a class="cart" href="/user/shop?userId=${sessionScope.get("userId")}&bookId=${book.bookId}">加入购物车</a>
                    <a class="more" href="/user/showDetail?bookId=${book.bookId}">详细内容</a></div>
            </section>
            </c:forEach>
           <%-- <section class="recommend">
                <h3>《JavaScript权威指南》</h3>
                <a href="#"><img src="images/prod3.jpg" alt="JavaScript权威指南"></a><div class="recommend-content"><p>经典的JavaScript工具书，从1996年以来，本书已经成为JavaScript程序员心中的《圣经》。</p>
                <p>David Flanagan，是一名程序员，也是一名作家 。他在O’Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby
                    Programming Language》、以及《Java in a
                    Nutshell》。David毕业于麻省理工学院，获得计算机科学与工程学位。他和妻子和孩子一起生活在西雅图和温哥华之间的美国太平洋西北海岸。</p></div>
                <div class="cartmore"><a class="cart" href="cart.html">加入购物车</a>
                    <a class="more" href="details.html">详细内容</a></div>
            </section>--%>
        </section>
        <!--最近新书-->
        <section class="article-section">
            <h2 id="title2">最近新书</h2>
            <c:forEach items="${bookList}" var="book" begin="0" end="1">
            <section>
                <h3>${book.bookName}</h3>
                <div class="effect-1">
                    <div class="image-box">
                        <img src="${pageContext.request.contextPath}/image/${book.bookImage} "id="image" />
                    </div>

                    <div class="text-desc">
                        <%--<h3>《HTML5+CSS3从入门到精通》</h3>--%>
                        <%--<p>《--%>
                            <%--<mark>HTML5</mark>--%>
                            <%--+CSS3从入门到精通》通过基础知识+中小实例+综合案例的方式，讲述了用--%>
                            <%--<mark>HTML5</mark>--%>
                            <%--+CSS3设计构建网站的必备知识，相对于权威指南、高级程序设计、开发指南同类图书，本书是一本适合快速入手的自学教程。--%>
                        <%--</p>--%>
                        <%--<a class="btn" href="cart.html">加入购物车</a> <a class="btn" href="details.html">详细内容</a>--%>
                    </div>
                    <div class="cartmore"><a class="cart" href="/user/shop?userId=${sessionScope.get("userId")}&bookId=${book.bookId}">加入购物车</a>
                        <a class="more" href="/user/showDetail?bookId=${book.bookId}">详细内容</a></div>
                </div>
            </section>
            </c:forEach>
           <%-- <section>
            <h3>《响应式Web设计》</h3>
            <div class="effect-1">
                <div class="image-box">
                    <img src="images/prod5.jpg" alt="响应式Web设计">
                </div>
                <div class="text-desc">
                    <h3>《响应式Web设计》</h3>
                    <p>《响应式Web设计：
                        <mark>HTML5</mark>
                        和CSS3实战》将当前Web设计中热门的响应式设计技术与
                        <mark>HTML5</mark>
                        和CSS3结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。《响应式Web设计：
                        <mark>HTML5</mark>
                        和CSS3实战》适合各个层次的Web开发和设计人员阅读。
                    </p>
                    <a class="btn" href="cart.html">加入购物车</a> <a class="btn" href="details.html">详细内容</a>
                </div>
            </div>
        </section>--%>
        </section>
        <!--促销-->
        <h2 id="title3">最近促销</h2>
        <section class="article-section">
            <c:forEach items="${bookList}" var="book" begin="0" end="1">
            <section>
                <h3>${book.bookName}</h3>
                <a href="#"><img class="promotion" src="${pageContext.request.contextPath}/image/${book.bookImage}" id="imag"></a>
                <div><a class="cart" href="/user/shop?userId=${sessionScope.get("userId")}&bookId=${book.bookId}">加入购物车</a>
                    <a class="more" href="/user/showDetail?bookId=${book.bookId}">详细内容</a></div>
            </section>
           <%-- <section>
            <h3>《JavaScript权威指南》</h3>
            <a href="#"><img class="promotion" src="images/prod3.jpg" alt="JavaScript权威指南"></a>
            <div><a class="cart" href="cart.html">加入购物车</a>
                <a class="more" href="details.html">详细内容</a></div>
        </section>--%>
            </c:forEach>
        </section>
    </article><!--右边边栏区--><aside>
    <!--广告区-->
    <section id="advert">
        <a href="#"><img src="${pageContext.request.contextPath}/images/ad1.jpg" alt="广告"></a>
        <a href="#"><img src="${pageContext.request.contextPath}/images/ad2.jpg" alt="广告"></a>
        <a href="#"><img src="${pageContext.request.contextPath}/images/ad3.jpg" alt="广告"></a>
    </section>
    <div class="border"><img src="images/border.gif" alt="分隔线" /></div>
    <!--畅销图书-->
    <section id="best-selling">
        <h2 id="title7">畅销图书</h2>
        <ul>
            <li><a class="selling" href="#">查令十字街84号（珍藏版）（汤唯、吴秀波主演北京遇上西雅图2）</a>
                <div class="curr">
                    <div class="p-img">
                        <a title="查令十字街84号（珍藏版）（汤唯、吴秀波主演北京遇上西雅图2）" href="#">
                            <img width="80" height="80" src="images/selling1.jpg">
                        </a>
                    </div>
                    <div class="p-name">
                        <a title="查令十字街84号（珍藏版）（汤唯、吴秀波主演北京遇上西雅图2）" href="#">查令十字街84号（珍藏版）（汤唯、吴秀波主演北京遇上西雅图2）</a>
                        <strong>￥43.50</strong>
                        <del>￥52.00</del>
                    </div>
                </div>
            </li>
            <li><a class="selling" href="#">分享经济 供给侧改革的新经济方案</a>
                <div class="curr">
                    <div class="p-img">
                        <a title="分享经济 供给侧改革的新经济方案" href="#">
                            <img width="80" height="80" src="images/selling2.jpg">
                        </a>
                    </div>
                    <div class="p-name">
                        <a title="分享经济 供给侧改革的新经济方案" href="#">分享经济 供给侧改革的新经济方案</a>
                        <strong>￥43.50</strong>
                        <del>￥52.00</del>
                    </div>
                </div>
            </li>
            <li><a class="selling" href="#">我喜欢这个功利的世界</a>
                <div class="curr">
                    <div class="p-img">
                        <a title="我喜欢这个功利的世界" href="#" target="_blank">
                            <img width="80" height="80" src="images/selling3.jpg">
                        </a>
                    </div>
                    <div class="p-name">
                        <a title="我喜欢这个功利的世界" href="#" target="_blank">我喜欢这个功利的世界</a>
                        <strong>￥43.50</strong>
                        <del>￥52.00</del>
                    </div>
                </div>
            </li>
            <li><a class="selling" href="#">谁不曾浑身是伤，谁不曾彷徨迷惘</a>
                <div class="curr">
                    <div class="p-img">
                        <a title="谁不曾浑身是伤，谁不曾彷徨迷惘" href="#" target="_blank">
                            <img width="80" height="80" src="images/selling4.jpg">
                        </a>
                    </div>
                    <div class="p-name">
                        <a title="谁不曾浑身是伤，谁不曾彷徨迷惘" href="#" target="_blank">谁不曾浑身是伤，谁不曾彷徨迷惘</a>
                        <strong>￥43.50</strong>
                        <del>￥52.00</del>
                    </div>
                </div>
            </li>
            <li><a class="selling" href="#">精进：如何成为一个很厉害的人</a>
                <div class="curr">
                    <div class="p-img">
                        <a title="精进：如何成为一个很厉害的人" href="#" target="_blank">
                            <img width="80" height="80" src="images/selling5.jpg">
                        </a>
                    </div>
                    <div class="p-name">
                        <a title="精进：如何成为一个很厉害的人" href="#" target="_blank">精进：如何成为一个很厉害的人</a>
                        <strong>￥43.50</strong>
                        <del>￥52.00</del>
                    </div>
                </div>
            </li>
        </ul>
    </section>
    <div class="border"><img src="images/border.gif" alt="分隔线" /></div>
    <!--图书分类-->
    <section class="aside-section">
        <h2 id="title4">图书分类</h2>
        <ul>
            <li><a href="category.html">编程语言</a></li>
            <li><a href="category.html">数据库</a></li>
            <li><a href="category.html">图形图像</a></li>
            <li><a href="category.html">网页制作</a></li>
            <li><a href="category.html">考试认证</a></li>
        </ul>
    </section><!--合作伙伴--><section class="aside-section">
    <h2 id="title5">合作伙伴</h2>
    <ul>
        <li><a href="#">中国电子商务研究中心</a></li>
        <li><a href="#">清华大学出版社</a></li>
        <li><a href="#">中国人民大学出版社</a></li>
        <li><a href="#">中国社会科学出版社</a></li>
    </ul>
</section>
    <div class="border"><img src="images/border.gif" alt="分隔线" /></div>
    <!--关于书店-->
    <section class="about">
        <h2 id="title6">关于书店</h2>
        <img src="${pageContext.request.contextPath}/images/about.gif" alt="叮叮书店"><p>叮叮书店成立于2010年6月，是由教育部主管、清华大学主办的综合出版单位。植根于“清华”这座久负盛名的高等学府，秉承清华人“自强不息，厚德载物”的人文精神。</p>
    </section>
</aside>
</div>
<!--页脚-->
<div id="footer-wrapper">
    <!--页脚导航-->
    <footer class="container">
        <section>
            <a href="index.html">首页</a> <a href="about.html">关于我们</a> <a href="#">服务条款</a> <a href="#">隐私策略</a> <a href="contact.html">联系我们</a>
        </section>
    </footer>
</div>
<!--版权标志-->
<section id="copyright" class="container">
    Copyright (C) <a href="index.html">叮叮书店</a> 2016-2018, All Rights Reserved | 京ICP证000001号音像制品经营许可证
    <address>通讯地址：清华大学学研大厦A座 读者服务部&nbsp;&nbsp;电话：（010）62781733&nbsp;&nbsp;网管信箱：netadmin@tup.tsinghua.edu.cn</address>
</section>
</body>
</html>